<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 
    - primary meta tags
  -->
  <title>~610的书窝~</title>
  <meta name="title" content="~610的书窝~">
  <meta name="description" content="~610的书窝~">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - Font Awesome CDN Link (Added)
  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">

  <!-- 
    - preload images
  -->
  <link rel="preload" as="image" href="./assets/images/t1.png">
  <link rel="preload" as="image" href="./assets/images/preview.png">

  <!-- Swiper CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

</head>

<body id="top">

  <!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="header-top">
      <div class="container">

        <a href="#" class="logo">
          <img src="./assets/images/logo.svg" width="138" height="28" alt="booken home">
        </a>

        <!-- <a href="#" class="logo">
          <img src="./assets/images/logoTest.jpg" width="120" height="120" alt="610书窝">
        </a> -->

        <div class="input-wrapper">
          <input type="search" name="search" placeholder="搜索我们的商店" class="input-field">

          <button class="btn btn-primary">搜索</button>
        </div>

        <div class="header-action">

          <a href="./cart.html" class="header-action-btn" aria-label="cart" title="购物车">
            <span class="span">3</span>
            <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
          </a>

          <button class="nav-open-btn" aria-label="open menu" title="打开菜单" data-nav-toggler>
            <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
          </button>

          <a href="./login.html" class="header-action-btn" aria-label="user" title="登录/注册">
            <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
          </a>

        </div>

      </div>
    </div>

    <div class="header-bottom" data-navbar>
      <div class="container">

        <nav class="navbar">

          <button class="nav-close-btn" data-nav-toggler aria-label="close menu" title="关闭菜单">
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

          <div class="navbar-top">
            <input type="search" name="search" placeholder="搜索我们的商店" class="input-field">

            <button class="search-btn" aria-label="Search">
              <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
            </button>
          </div>

          <ul class="navbar-list">

            <li>
              <a href="index.html" class="navbar-link">首页</a>
            </li>

            <li>
              <a href="blog.html" class="navbar-link navbar-link-cute blog-link">
                <span class="cute-icon">📚</span>
                博客
                <span class="cute-bubble">读好文~</span>
              </a>
            </li>

            <li>
              <a href="shop.html" class="navbar-link navbar-link-cute shop-link">
                <span class="cute-icon">🛍️</span>
                商店
                <span class="cute-bubble">买买买~</span>
              </a>
            </li>

            <li>
              <a href="about.html" class="navbar-link navbar-link-cute about-link">
                <span class="cute-icon">🏡</span>
                关于我们
                <span class="cute-bubble">认识我们~</span>
              </a>
            </li>

            <li>
              <a href="contact.html" class="navbar-link navbar-link-cute contact-link">
                <span class="cute-icon">✉️</span>
                联系方式
                <span class="cute-bubble">找到我们~</span>
              </a>
            </li>

          </ul>

        </nav>

        <a href="tel:+15813316885" class="header-contact-link">
          <ion-icon name="headset-outline" aria-hidden="true"></ion-icon>

          <span class="span">(+86) 15813316885</span>
        </a>

      </div>
    </div>

    <div class="overlay" data-overlay data-nav-toggler></div>
  </header>





  <main>
    <article>

      <!-- 
        - #HERO
      -->

      <section class="section hero has-bg-image" aria-label="home"
        style="background-image: url('./assets/images/preview.png')">
        <div class="container">

          <div class="hero-content">

            <h1 class="h1 hero-title has-after">
              获取你的新书 <br>
              收藏
            </h1>

            <p class="hero-text">
              欢迎来到610的小窝呀~~~
            </p>

            <div class="btn-wrapper">

              <a href="#" class="btn">
                <span class="span">探索更多</span>

                <ion-icon name="cart" aria-hidden="true"></ion-icon>
              </a>

              <button class="play-btn" aria-label="播放视频">
                <ion-icon name="play-outline" aria-hidden="true"></ion-icon>
              </button>

            </div>

          </div>

          <figure class="hero-banner">
            <div class="swiper hero-swiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="./assets/images/slide1.jpg" alt="精选书籍1" class="w-100">
                </div>
                <div class="swiper-slide">
                  <img src="./assets/images/slide2.jpg" alt="精选书籍2" class="w-100">
                </div>
                <div class="swiper-slide">
                  <img src="./assets/images/slide3.jpg" alt="精选书籍3" class="w-100">
                </div>
                <div class="swiper-slide">
                  <img src="./assets/images/slide4.jpg" alt="精选书籍4" class="w-100">
                </div>
                <div class="swiper-slide">
                  <img src="./assets/images/slide5.jpg" alt="精选书籍5" class="w-100">
                </div>
              </div>
            </div>
          </figure>

        </div>
      </section>





      <!-- 
        - #FEATURE
      -->

      <section class="section feature" aria-label="feature">
        <div class="container">

          <div class="grid-list">

            <li>
              <div class="feature-card">

                <div class="card-icon">
                  <img src="./assets/images/feature-1.png" width="100" height="100" loading="lazy" alt="feature icon"
                    class="w-100">
                </div>

                <div>
                  <h3 class="h3 card-title">免费送货</h3>

                  <p class="card-text">订单满$100</p>
                </div>

              </div>
            </li>

            <li>
              <div class="feature-card">

                <div class="card-icon">
                  <img src="./assets/images/feature-2.png" width="100" height="100" loading="lazy" alt="feature icon"
                    class="w-100">
                </div>

                <div>
                  <h3 class="h3 card-title">安全支付</h3>

                  <p class="card-text">100% 安全支付</p>
                </div>

              </div>
            </li>

            <li>
              <div class="feature-card">

                <div class="card-icon">
                  <img src="./assets/images/feature-3.png" width="100" height="100" loading="lazy" alt="feature icon"
                    class="w-100">
                </div>

                <div>
                  <h3 class="h3 card-title">最优价格</h3>

                  <p class="card-text">保证低价</p>
                </div>

              </div>
            </li>

            <li>
              <div class="feature-card">

                <div class="card-icon">
                  <img src="./assets/images/feature-4.png" width="100" height="100" loading="lazy" alt="feature icon"
                    class="w-100">
                </div>

                <div>
                  <h3 class="h3 card-title">轻松退货</h3>

                  <p class="card-text">3天内退货</p>
                </div>

              </div>
            </li>

          </div>

        </div>
      </section>






      <!-- 
        - #FEATURED COLLECTION
      -->

      <section class="section featured" aria-label="featured collection">
        <div class="container">

          <h2 class="h2 section-title">精选系列</h2>

          <p class="section-text">
            610精心挑选~
          </p>

          <ul class="grid-list">

            <li>
              <div class="product-card">

                <span class="card-badge">新品</span>

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book1.jpg" width="384" height="480" loading="lazy" alt="概率论与数理统计"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">概率论与数理统计</a>
                  </h3>

                  <data class="card-price" value="80">$2.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book2.jpg" width="384" height="480" loading="lazy" alt="数据库原理与应用"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">数据库原理与应用</a>
                  </h3>

                  <data class="card-price" value="19">$3.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book3.jpg" width="384" height="480" loading="lazy" alt="毛概"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">毛概</a>
                  </h3>

                  <data class="card-price" value="80">$80.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book4.jpg" width="384" height="480" loading="lazy" alt="习概"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">习概</a>
                  </h3>

                  <data class="card-price" value="55">$10.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book5.jpg" width="384" height="480" loading="lazy" alt="微积分"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">微积分</a>
                  </h3>

                  <data class="card-price" value="100">$100.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book6.jpg" width="384" height="480" loading="lazy" alt="线性代数"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">线性代数</a>
                  </h3>

                  <data class="card-price" value="89">$89.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book7.jpg" width="384" height="480" loading="lazy" alt="Python"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">Python</a>
                  </h3>

                  <data class="card-price" value="34">$34.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/book8.jpg" width="384" height="480" loading="lazy" alt="Java"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">Java</a>
                  </h3>

                  <data class="card-price" value="67">$67.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #OFFER
      -->

      <section class="section offer has-bg-image" aria-label="special offer"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <p class="section-subtitle">特别优惠</p>

          <h2 class="h2 section-title">所有书籍现价五折！勿失良机！</h2>

          <p class="section-text">
            啦啦啦啦啦~
          </p>

          <ul class="countdown-list">

            <li>
              <p class="countdown-time">15</p>

              <p class="countdown-label">天</p>
            </li>

            <li>
              <p class="countdown-time">21</p>

              <p class="countdown-label">小时</p>
            </li>

            <li>
              <p class="countdown-time">18</p>

              <p class="countdown-label">分钟</p>
            </li>

            <li>
              <p class="countdown-time">14</p>

              <p class="countdown-label">秒</p>
            </li>

          </ul>

          <a href="#" class="btn">探索更多</a>

        </div>
      </section>





      <!-- 
        - #POPULAR
      -->

      <section class="section popular" aria-label="popular collection">
        <div class="container">

          <h2 class="h2 section-title">热门系列</h2>

          <p class="section-text">
            610热门畅销书籍！！！Come on man!
          </p>

          <ul class="filter-list">

            <li>
              <button class="filter-btn" data-filter-btn="featured">特色产品</button>
            </li>

            <li>
              <button class="filter-btn" data-filter-btn="new">新品</button>
            </li>

            <li>
              <button class="filter-btn" data-filter-btn="sell">促销产品</button>
            </li>

          </ul>

          <ul class="product-list has-scrollbar">

            <li class="scrollbar-item" data-filter="sell">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/new5.jpg" width="384" height="480" loading="lazy" alt="自我关怀"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">自我关怀</a>
                  </h3>

                  <data class="card-price" value="34">$34.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li class="scrollbar-item" data-filter="new">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/new6.jpg" width="384" height="480" loading="lazy" alt="欢迎来到太空"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">欢迎来到太空</a>
                  </h3>

                  <data class="card-price" value="150">$150.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li class="scrollbar-item" data-filter="sell">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/new4.jpg" width="384" height="480" loading="lazy" alt="季风"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">季风</a>
                  </h3>

                  <data class="card-price" value="23">$23.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li class="scrollbar-item" data-filter="featured">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/new3.jpg" width="384" height="480" loading="lazy" alt="你所拥有的一切"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">你所拥有的一切</a>
                  </h3>

                  <data class="card-price" value="57">$57.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li class="scrollbar-item" data-filter="new">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/new2.jpg" width="384" height="480" loading="lazy" alt="平面设计学院"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">平面设计学院</a>
                  </h3>

                  <data class="card-price" value="100">$100.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li class="scrollbar-item" data-filter="sell">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/new1.jpg" width="384" height="480" loading="lazy" alt="食物中毒"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">食物中毒</a>
                  </h3>

                  <data class="card-price" value="76">$76.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li class="scrollbar-item" data-filter="featured">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/recommand3.jpg" width="384" height="480" loading="lazy" alt="设计"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">设计</a>
                  </h3>

                  <data class="card-price">免费</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

            <li class="scrollbar-item" data-filter="new">
              <div class="product-card">

                <div class="card-banner img-holder" style="--width: 384; --height: 480;">
                  <img src="./assets/images/recommand4.jpg" width="384" height="480" loading="lazy" alt="世界新闻"
                    class="img-cover">

                  <div class="card-action">

                    <button class="action-btn" aria-label="quick view" title="快速查看">
                      <ion-icon name="eye-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to wishlist" title="加入心愿单">
                      <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="compare" title="比较">
                      <ion-icon name="repeat-outline" aria-hidden="true"></ion-icon>
                    </button>

                    <button class="action-btn" aria-label="add to cart" title="加入购物车">
                      <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
                    </button>

                  </div>
                </div>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">世界新闻</a>
                  </h3>

                  <data class="card-price" value="20">$20.00</data>

                  <div class="rating-wrapper">
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                    <ion-icon name="star-outline" aria-hidden="true"></ion-icon>
                  </div>

                </div>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #BLOG
      -->

      <section class="section blog" aria-label="blog">
        <div class="container">

          <h2 class="h2 section-title">最新博客</h2>

          <p class="section-text">
            610书窝最新博客
          </p>

          <ul class="has-scrollbar">

            <li class="scrollbar-item">
              <div class="blog-card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                  <img src="./assets/images/blog-1.jpg" width="600" height="400" loading="lazy" alt="重要阅读信息"
                    class="img-cover">
                </figure>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">重要阅读信息</a>
                  </h3>

                  <ul class="card-meta-list">

                    <li class="meta-item">
                      <time class="meta-link" datetime="2025-04-10">2025年4月10日</time>
                    </li>

                    <li class="meta-item">
                      <a href="#" class="meta-link">1 条评论</a>
                    </li>

                  </ul>

                  <p class="card-text">
                    暑假很美好。为假期着装可能就没那么美好了：轻装上阵...
                  </p>

                  <a href="#" class="btn card-btn">阅读更多...</a>

                </div>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="blog-card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                  <img src="./assets/images/blog-2.jpg" width="600" height="400" loading="lazy" alt="国际活动书"
                    class="img-cover">
                </figure>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">国际活动书</a>
                  </h3>

                  <ul class="card-meta-list">

                    <li class="meta-item">
                      <time class="meta-link" datetime="2022-04-10">2025年04月10日</time>
                    </li>

                    <li class="meta-item">
                      <a href="#" class="meta-link">1 条评论</a>
                    </li>

                  </ul>

                  <p class="card-text">
                    暑假很美好。为假期着装可能就没那么美好了：轻装上阵...
                  </p>

                  <a href="#" class="btn card-btn">阅读更多...</a>

                </div>

              </div>
            </li>

            <li class="scrollbar-item">
              <div class="blog-card">

                <figure class="card-banner img-holder" style="--width: 600; --height: 400;">
                  <img src="./assets/images/blog-3.jpg" width="600" height="400" loading="lazy" alt="书籍的国际活动"
                    class="img-cover">
                </figure>

                <div class="card-content">

                  <h3 class="h3">
                    <a href="#" class="card-title">书籍的国际活动</a>
                  </h3>

                  <ul class="card-meta-list">

                    <li class="meta-item">
                      <time class="meta-link" datetime="2025-04-10">2025年04月10日</time>
                    </li>

                    <li class="meta-item">
                      <a href="#" class="meta-link">1 条评论</a>
                    </li>

                  </ul>

                  <p class="card-text">
                    暑假很美好。为假期着装可能就没那么美好了：轻装上阵...
                  </p>

                  <a href="#" class="btn card-btn">阅读更多...</a>

                </div>

              </div>
            </li>

          </ul>

        </div>
      </section>

    </article>
  </main>





  <!-- 
    - #FOOTER
  -->

  <footer class="footer has-bg-image" style="background-image: url('./assets/images/section-bg.jpg')">

    <div class="footer-top section">
      <div class="container grid-list">

        <div class="footer-brand">

          <a href="#" class="logo">
            <img src="./assets/images/logo.svg" width="138" height="28" alt="610书窝 Logo">
          </a>

          <p class="footer-text">
            欢迎来到610书窝！你的专属宿舍阅读角~ 📚✨
          </p>

          <ul class="social-list">
            <li>
              <a href="#" class="social-link" title="QQ">
                <i class="fa-brands fa-qq"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微信">
                <i class="fa-brands fa-weixin"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微博">
                <i class="fa-brands fa-weibo"></i>
              </a>
            </li>
          </ul>

        </div>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">关于书窝</p>
          </li>

          <li>
            <a href="#" class="footer-link">书窝故事</a>
          </li>

          <li>
            <a href="./members.html" class="footer-link">成员介绍</a>
          </li>

          <li>
            <a href="#" class="footer-link">加入我们?</a>
          </li>

          <li>
            <a href="#" class="footer-link">书友Q&A</a>
          </li>

          <li>
            <a href="#" class="footer-link">好书推荐</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">书友指南</p>
          </li>

          <li>
            <a href="#" class="footer-link">借阅规则</a>
          </li>

          <li>
            <a href="#" class="footer-link">图书分类</a>
          </li>

          <li>
            <a href="#" class="footer-link">荐购通道</a>
          </li>

          <li>
            <a href="#" class="footer-link">书单分享</a>
          </li>

          <li>
            <a href="#" class="footer-link">活动日历</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">特色活动</p>
          </li>

          <li>
            <a href="#" class="footer-link">读书分享会</a>
          </li>

          <li>
            <a href="#" class="footer-link">主题书展</a>
          </li>

          <li>
            <a href="#" class="footer-link">好物交换</a>
          </li>

          <li>
            <a href="#" class="footer-link">考试周加油站</a>
          </li>

          <li>
            <a href="#" class="footer-link">留言板</a>
          </li>

        </ul>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          © 2025 610书窝 | 由舍友们用心维护~ ❤️
        </p>

      </div>
    </div>

  </footer>





  <!-- 
    - #BACK TO TOP
  -->

  <a href="#top" class="back-top-btn" aria-label="返回顶部" data-back-top-btn>
    <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
  </a>





  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

  <style>
    /* 确保hero区域正确布局 */
    .hero .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
      overflow: hidden;
      /* 防止内容溢出 */
    }

    @media (max-width: 992px) {
      .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
      }
    }

    /* 轮播图容器样式 */
    .hero-banner {
      width: 100%;
      max-width: 475px;
      /* 限制最大宽度 */
      margin: 0 auto;
      overflow: hidden;
    }

    /* 新的Swiper卡片轮播图样式 */
    .hero-swiper {
      width: 100%;
      height: 400px;
      padding: 30px 0;
    }

    .hero-swiper .swiper-slide {
      width: 300px;
      height: 360px;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 15px 30px rgba(255, 102, 178, 0.3);
      transition: all 0.3s ease;
    }

    /* 卡片内图片 */
    .hero-swiper .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.5s ease;
    }

    /* 卡片鼠标悬停效果 */
    .hero-swiper .swiper-slide:hover img {
      transform: scale(1.05);
    }

    /* 阴影和边框效果 */
    .hero-swiper .swiper-slide {
      border: 3px solid transparent;
      background-origin: border-box;
      background-clip: content-box, border-box;
      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(45deg, var(--primary-pink), var(--secondary-pink));
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* 增强鼠标悬停效果 */
    .hero-swiper .swiper-slide:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 20px 30px rgba(255, 102, 178, 0.4);
    }

    /* 添加滑动提示样式 */
    .hero-swiper::after {
      content: '';
      position: absolute;
      right: 25%;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 10;
      opacity: 0.7;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff66b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      animation: pulse 1.5s infinite ease-in-out;
    }

    @keyframes pulse {
      0% {
        opacity: 0.7;
        transform: translateY(-50%) scale(1);
      }

      50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
      }

      100% {
        opacity: 0.7;
        transform: translateY(-50%) scale(1);
      }
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
      .hero-swiper {
        height: 350px;
      }

      .hero-swiper .swiper-slide {
        width: 250px;
        height: 320px;
      }
    }

    @media (max-width: 480px) {
      .hero-swiper {
        height: 320px;
      }

      .hero-swiper .swiper-slide {
        width: 220px;
        height: 280px;
      }
    }
  </style>

  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 初始化卡片轮播图
      var swiper = new Swiper(".hero-swiper", {
        effect: "cards",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        cardsEffect: {
          rotate: true,
          perSlideOffset: 5,
          perSlideRotate: 2,
          slideShadows: false
        }
      });
    });
  </script>

</body>

</html>